<!--这是查看产品组件-->
<template>
	<div class="app-container">
    	<div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
				<el-input v-model="productName" clearable placeholder="产品名称" style="width: 150px;"></el-input>
				<el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="发布日期（开始）" v-model="publish_time">
                </el-date-picker>
                <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="发布日期（结束）"  v-model="end_time">
                </el-date-picker>
				<el-select  style="width: 120px;" v-model="selectSort" placeholder="请选择分类">
				    <el-option
				      v-for="item in sortOptions"
				      :key="item.id"
				      :label="item.value"
				      :value="item.value">
				    </el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search">搜索</el-button>
	        </el-form>
	        <div>
	        	<el-button type="success">复制链接</el-button>
	        	<el-button type="primary" @click="isShowAdd=true">添加产品</el-button>
	        </div>
		</div>
		<div>
			<el-table :data="tableData" row-key="id"   border fit highlight-current-row style="width: 100%;font-size: 12px;">
			 	<el-table-column align="center" label="名称">
			        <template slot-scope="scope">
			          <span>{{scope.row.name}}</span>
			        </template>
		      	</el-table-column>
		      	<el-table-column width="80" align="center" label="编号">
			        <template slot-scope="scope">
			          <span>{{scope.row.num}}</span>
			        </template>
			    </el-table-column>
		      	<el-table-column width="100" align="center" label="类别">
			        <template slot-scope="scope">
			          <span>{{sortName}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="50"  align="center" label="价格">
			        <template slot-scope="scope">
			          <span>{{scope.row.price}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="50"  align="center" label="原价">
			        <template slot-scope="scope">
			          <span>{{scope.row.primePrice}}</span>
			        </template>
			    </el-table-column><el-table-column width="50"  align="center" label="成本">
			        <template slot-scope="scope">
			          <span>{{scope.row.cost}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" width="50" label="是否热门">
			        <template slot-scope="scope">
			          <span v-if="scope.row.isHot=='是'" style="color: green;">✔</span>
			          <span v-if="scope.row.isHot=='否'" style="color: red;">✘</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" width="50" label="是否新品">
				        <template slot-scope="scope">
				          <span v-if="scope.row.isNew=='是'" style="color: green;">✔</span>
			        	  <span v-if="scope.row.isNew=='否'" style="color: red;">✘</span>
				        </template>
			    </el-table-column>
			    <el-table-column width="100"  align="center" label="所在地">
			        <template slot-scope="scope">
			          <span>{{scope.row.city}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="100"  align="center" label="统一邮费">
			        <template slot-scope="scope">
			          <span>{{scope.row.postage}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="50" align="center"   label="已售数量">
			        <template slot-scope="scope">
			          <span>{{scope.row.soldNum}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" width="50" label="是否上架">
			        <template slot-scope="scope">
			          	<span v-if="scope.row.isUp=='是'" style="color: green;">✔</span>
			        	<span v-if="scope.row.isUp=='否'" style="color: red;">✘</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="创建日期">
			        <template slot-scope="scope">
			          <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
			        </template>
		    	</el-table-column>
			     <el-table-column  align="center" label="操作">
			        <template slot-scope="scope">
	                    <b v-if="permission == 3">编辑</b>
	                    <b v-if="permission == 3">删除</b>
	                    <b>复制链接</b>
	                    <b v-if="permission == 3">微信推送</b>
	                    <b v-if="permission == 3">课程评论</b>
	                </template>
			    </el-table-column>
		   </el-table>
		</div>
		<addProduct v-show="isShowAdd" @hideAdd="hideAdd"></addProduct>
	</div>
</template>
<script>
import addProduct from '../../productList/components/addProduct.vue'
import { mall_mallInfo } from '@/utils/permission'
export default {
  components: {
    addProduct
  },
  data() {
    return {
      permission: 3,
      isShowAdd: false,
      publish_time: null, // 搜索的发布时间（开始）
      end_time: null, // 搜索的发布时间（结束）
      productName: null, // 搜索的产品名称
      selectSort: null, // 选择的产品分类
      sortOptions: [ // 产品分类选项
        {
          id: 0,
          value: '分类一'
        }, {
          id: 1,
          value: '分类二'
        }, {
          id: 2,
          value: '分类三'
        }
      ],
      tableData: [
        {
          id: 0,
          name: 'x',
          num: '50',
          sort: '测试分类一',
          price: '0.00',
          primePrice: '36.00',
          cost: '10.00',
          isHot: '否',
          isNew: '是',
          city: '福建南平',
          postage: '0.00',
          soldNum: 3,
          isUp: '是',
          createTime: '152345646546'
        },
        {
          id: 1,
          name: 'x',
          num: '50',
          sort: '分类二',
          price: '20.00',
          primePrice: '36.00',
          cost: '10.00',
          isHot: '是',
          isNew: '是',
          city: '福建厦门',
          postage: '0.00',
          soldNum: 3,
          isUp: '是',
          createTime: '152345646546'
        },
        {
          id: 2,
          name: 'x',
          num: '50',
          sort: '测试分类一',
          price: '0.00',
          primePrice: '36.00',
          cost: '10.00',
          isHot: '是',
          isNew: '是',
          city: '福建南平',
          postage: '0.00',
          soldNum: 3,
          isUp: '是',
          createTime: '152345646546'
        },
        {
          id: 3,
          name: 'x',
          num: '50',
          sort: '分类三',
          price: '0.00',
          primePrice: '36.00',
          cost: '10.00',
          isHot: '否',
          isNew: '是',
          city: '福建南平',
          postage: '0.00',
          soldNum: 3,
          isUp: '是',
          createTime: '152345646546'
        }
      ],
      sortName: '' // 传过来的分类名
    }
  },
  methods: {
    getModelPermission() {
      this.permission = mall_mallInfo()
    },
    hideAdd(msg) {
      this.isShowAdd = msg
    }
  },
  mounted() {
    this.getModelPermission()
    this.sortName = this.$route.params.sortName
  }
}
</script>

<style scoped>
	b{
		cursor: pointer;
		font-weight: 500;
	}
	b:hover{
		color: #409EFF;
	}
</style>
